<template>
  <el-card class="el-card--has-heading success">
    <div slot="header">
      <span>生鲜销量单</span>
    </div>
    <v-table :dataSource="dataSource" :columns="columns" :loading="loading" :pagination="false">
      <template slot="toolbar">
        <el-form inline size="small" :model="query" ref="query" class="flex flex-wrap">
          <el-form-item prop="supplier">
            <el-select v-model="query.supplier" placeholder="请选择供应商">
              <el-option
                v-for="(it, i) in supplySelects"
                :key="i"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="groupLeader">
            <el-select v-model="query.groupLeader" placeholder="请选择团长">
              <el-option
                v-for="(it, i) in commanderSelects"
                :key="i"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="goodsName">
            <el-input placeholder="请输入商品名称" v-model="query.goodsName" />
          </el-form-item>

          <el-form-item prop="orderState">
            <el-select v-model="query.orderState" placeholder="请选择订单状态">
              <el-option
                v-for="(it, i) in orderStatus.filter(it => it.value !== 1)"
                :key="i"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="dateRange">
            <el-date-picker
              size="small"
              v-model="query.dateRange"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="handleSearch">查询</el-button>
            <el-button type="default" @click="onClickBatchExport">导出</el-button>
            <el-button type="warning" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </v-table>
  </el-card>
</template>

<script>
import {
  getFreshManageSalesList,
  getCommanderSelects,
  getFreshSupplierSelects
} from '@/api'

/* components
---------------------------------------------------------------- */
import { Query } from '@/mixins'

/* model
---------------------------------------------------------------- */
import { orderStatusEnum } from '@/core/enum'
import { downloadBase64UseLoading } from '@/utils/http-download'
import { exportURL } from './model'

export default {
  mixins: [Query('query')],

  data () {
    return {
      dataSource: [],
      loading: false,
      columns: [
        { prop: 'goodsName', label: '商品名称' },
        { prop: 'number', label: '商品份数' }
      ],
      query: {
        groupLeader: '',
        goodsName: '',
        orderState: '',
        supplier: '',
        dateRange: [],
        startDate: '',
        endDate: ''
      },
      supplySelects: [],
      commanderSelects: []
    }
  },
  methods: {
    getRealQueryParams (params) {
      let { dateRange, ...rest } = params
      return rest
    },
    // Requests
    // ------------------------------------------
    getFreshManageSalesList (fn) {
      const { dateRange, ...rest } = this.query
      return this.Catch(getFreshManageSalesList, {
        onOk (res) {
          this.dataSource = res.data
        }
      })('loading', (fn || this.$noop)(rest))
    },

    /**
     * 团长下拉列表
     */
    getCommanderSelects (loading) {
      if (this.commanderSelects.length) {
        return Promise.resolve()
      }
      return this.Catch(getCommanderSelects, {
        onOk ({ data }) {
          this.commanderSelects = data.map((it) => ({
            label: it.groupLeaderName,
            value: it.groupLeaderId,
            ...it
          }))
        }
      })(loading)
    },

    /**
     * 供应商下拉列表
     */
    getFreshSupplierSelects (loading) {
      if (this.supplySelects.length) {
        return Promise.resolve()
      }
      return this.Catch(getFreshSupplierSelects, {
        onOk ({ data }) {
          this.supplySelects = data.map((it) => ({
            label: it.supplierName,
            value: it.supplierId
          }))
        }
      })(loading)
    },

    // Table
    // ------------------------------------------
    beforeReset () {
      this.query['startDate'] = ''
      this.query['endDate'] = ''
    },
    // --------------------------------------------- 导出 开始 ---------------------------------------------

    processExportParams () {
      const { pageSize, pageNum, dateRange, ...rest } = this.query
      return {
        ...rest
      }
    },
    async onClickBatchExport () {
      try {
        await downloadBase64UseLoading.bind(this)('loading')(
          exportURL,
          this.processExportParams()
        )
      } catch (err) {
        this.$message.warning(err.message)
      }
    }
    // --------------------------------------------- 导出 结束 ---------------------------------------------
  },
  computed: {
    orderStatus () {
      return this.$mapEnumToSelect(orderStatusEnum)
    }
  },
  components: {},

  created () {
    this.getFreshManageSalesList()
    this.inject(this.getFreshManageSalesList)

    this.getFreshSupplierSelects()
    this.getCommanderSelects()

    this.$watch('query.dateRange', (val) => {
      try {
        this.query['startDate'] = val[0] || ''
        this.query['endDate'] = val[1] || ''
      } catch (e) {}
    })
  }
}
</script>
